<template>
  <div id="priceMoney">
    <div class="center box1">
      <p>多种套餐选择</p>
      <i>您可以根据业务需求，选择相应套餐</i>
    </div>
    <div class="center box2">
      <div class="box2-1">
        <div
          class="title"
          style="display: flex; margin-top: 50px; align-items: center"
        >
          <img
            src="../assets/Icon3/price1.png"
            alt=""
            width="42px"
            height="42px"
            style="margin-right: 10px"
          />
          <div class="right">
            <p
              style="
                font-size: 30px;
                font-weight: 500;
                color: #2c55ff;
                margin-top: 0;
              "
            >
              WEB封装
            </p>
            <p
              style="
                margin: 0;
                font-size: 14px;
                font-weight: 400;
                color: #b8c6fe;
                margin-top: 10px;
              "
            >
              官方推荐
            </p>
          </div>
        </div>

        <div style="display: flex; margin-top: 50px">
          <img
            src="../assets/Icon3/price_circle.png"
            alt=""
            style="margin-right: 20px"
          />
          <p style="font-size: 14px; font-weight: 400; color: #888888">
            服务特色
          </p>
        </div>

        <p
          style="
            width: 320px;
            margin-top: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #aaadbe;
            line-height: 25px;
          "
        >
          全部在线操作打包，根据业务要求
          自由配置功能插件。原生代码编写，100%权限可控
          支持各类机型和系统等，技术人员服务在线
          及时回复和解决用户疑问。只需一个网站地址，就能创建属于您自己的移动APP。
        </p>

        <div style="display: flex; margin-top: 50px">
          <img
            src="../assets/Icon3/price_circle.png"
            alt=""
            style="margin-right: 20px"
          />
          <p style="font-size: 14px; font-weight: 400; color: #888888">
            专享优势
          </p>
        </div>

        <div
          style="
            display: flex;
            font-size: 16px;
            font-weight: 400;
            color: #888888;
            margin-top: 20px;
          "
        >
          <span>官方推荐 &nbsp; 极其稳定</span>
          <i>&nbsp;|&nbsp;</i>
          <span>急速上架 &nbsp; 无需等待 </span>
        </div>

        <div
          style="
            display: flex;
            font-size: 16px;
            font-weight: 400;
            color: #888888;
            margin-top: 20px;
          "
        >
          <span>收费灵活 &nbsp; 由您掌控</span>
          <i>&nbsp;|&nbsp;</i>
          <span>安全稳定 &nbsp; 选配性高 </span>
        </div>

        <div style="margin-top: 50px; display: flex; align-items: center">
          <h1 style="font-size: 24px; font-weight: 500; margin-right: 100px">
            100元/起
          </h1>
          <button
            style="
              cursor: pointer;
              font-size: 14px;
              font-weight: 400;
              color: #2c56ff;
              padding: 11px 31px;
              border: 1px solid #2c56ff;
              border-radius: 4px;
              background-color: #fff;
            "
            @click="$router.push('priceTfsign')"
          >
            查看详情
          </button>
        </div>
      </div>

      <div class="box2-1">
        <div
          class="title"
          style="display: flex; margin-top: 50px; align-items: center"
        >
          <img
            src="../assets/Icon3/price3.png"
            alt=""
            width="28px"
            height="28px"
            style="margin-right: 10px"
          />
          <div class="right">
            <p style="font-size: 30px; font-weight: 500; margin-top: 0">
              会员套餐
            </p>
          </div>
        </div>

        <div style="display: flex; margin-top: 50px">
          <img
            src="../assets/Icon3/price_circle.png"
            alt=""
            style="margin-right: 20px"
          />
          <p style="font-size: 14px; font-weight: 400; color: #888888">
            服务特色
          </p>
        </div>

        <p
          style="
            width: 190px;
            margin-top: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #aaadbe;
            line-height: 25px;
          "
        >
          升级更大的存储空间和上传应用大小，一次开通使用一年，让您使用更加方便。
        </p>

        <div style="display: flex; margin-top: 50px">
          <img
            src="../assets/Icon3/price_circle.png"
            alt=""
            style="margin-right: 20px"
          />
          <p style="font-size: 14px; font-weight: 400; color: #888888">
            专享优势
          </p>
        </div>

        <p
          style="
            font-size: 16px;
            font-weight: 400;
            color: #878ca4;
            margin: 30px 0 8px 0;
          "
        >
          更大的储存空间
        </p>

        <p
          style="
            font-size: 16px;
            font-weight: 400;
            color: #878ca4;
            margin: 8px 0;
          "
        >
          上传更大的应用
        </p>

        <span style="font-size: 16px; font-weight: 500; margin-top: 100px"
          >低至￥99元/起</span
        >
        <button
          style="
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #2d56ff;
            text-align: center;
            border-radius: 4px;
            background-color: #fff;
            color: #2d56ff;
            cursor: pointer;
            margin-top: 30px;
          "
          @click="$router.push('/priceMdm')"
        >
          查看详情
        </button>
      </div>
      <div class="box2-1">
        <div
          class="title"
          style="display: flex; margin-top: 50px; align-items: center"
        >
          <img
            src="../assets/Icon3/price4.png"
            alt=""
            width="28px"
            height="28px"
            style="margin-right: 10px"
          />
          <div class="right">
            <p style="font-size: 30px; font-weight: 500; margin-top: 0">
              分发套餐
            </p>
          </div>
        </div>

        <div style="display: flex; margin-top: 50px">
          <img
            src="../assets/Icon3/price_circle.png"
            alt=""
            style="margin-right: 20px"
          />
          <p style="font-size: 14px; font-weight: 400; color: #888888">
            服务特色
          </p>
        </div>

        <p
          style="
            width: 190px;
            margin-top: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #aaadbe;
            line-height: 25px;
          "
        >
          一键上传APP应用包，自动生成下载链接和二维码，方便用户内测下载。
        </p>

        <div style="display: flex; margin-top: 50px">
          <img
            src="../assets/Icon3/price_circle.png"
            alt=""
            style="margin-right: 20px"
          />
          <p style="font-size: 14px; font-weight: 400; color: #888888">
            专享优势
          </p>
        </div>

        <p
          style="
            font-size: 16px;
            font-weight: 400;
            color: #878ca4;
            margin: 30px 0 8px 0;
          "
        >
          支持应用合并下载
        </p>

        <p
          style="
            font-size: 16px;
            font-weight: 400;
            color: #878ca4;
            margin: 8px 0;
          "
        >
          CDN高速下载保证
        </p>

        <span style="font-size: 16px; font-weight: 500; margin-top: 100px"
          >低至￥99元/起</span
        >
        <button
          style="
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #2d56ff;
            text-align: center;
            border-radius: 4px;
            background-color: #fff;
            color: #2d56ff;
            cursor: pointer;
            margin-top: 30px;
          "
          @click="$router.push('/setMeal')"
        >
          查看详情
        </button>
      </div>
    </div>
    <div class="center box3">
      <p style="font-size: 16px">注</p>
      <p style="margin: 20px 0 0 0; font-size: 18px; font-weight: 400">
        付款方式有哪些，有发票和合同吗？
      </p>
      <p style="margin: 10px 0 0 0; font-size: 14px">
        我们的服务目前支持支付宝、微信支付和对公转账的三种方式进行汇款。我们的所有服务都是提供发票的，请在发票管理中，选择索取发票可以对购买的服务开具发票。
      </p>
      <p style="margin: 20px 0 0 0; font-size: 18px; font-weight: 400">
        收费后是否影响之前的 App 数据
      </p>
      <p style="margin: 10px 0 40px 0; font-size: 14px">
        购买收费套餐后，对之前用户上传的应用和版本是不产生任何的影响的。我们会帮您保留所有的应用数据，所有应用的版本信息，短信信息，用户信息等将从收费版执行日开始进行更新。
      </p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
#priceMoney {
  background-color: #fafbff;
}

.center {
  width: 1200px;
  margin: 0 auto;
}

.box1 {
  text-align: center;
  padding-top: 50px;

  p {
    font-size: 30px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 0;
  }

  i {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #b4b6c0;
    padding-top: 10px;
  }
}

.box2 {
  margin-top: 40px;
  display: flex;
  height: 642px;

  .box2-1 {
    flex: 1;
    border: 1px solid #edeff6;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .box2-1:nth-child(1) {
    flex: 2;
    border-radius: 0px 100px 0px 0px;
  }
}

.box3 {
  margin-top: 100px;
  color: #aaadbe;
}
</style>
